<template>
  <div>
    <div class="search-container">
      <el-form :inline="true" ref="form" size="small">
        <el-form-item label="用户ID">
          <el-input v-model="searchData.memberId" placeholder="请输入用户ID"></el-input>
        </el-form-item>
        <el-form-item label="订单号">
          <el-input v-model="searchData.orderNum" placeholder="请输入订单号"></el-input>
        </el-form-item>
        <el-button type="primary" @click="onSearch" size="small">查询</el-button>
        <el-button @click="onReset" size="small">重置</el-button>
      </el-form>
    </div>
    <el-table class="mt-20 el-table-modify" :data="tableData" border>
      <el-table-column prop="memberId" align="left" label="用户ID"></el-table-column>
      <el-table-column prop="brandName" align="center" label="权益类型"></el-table-column>
      <el-table-column prop="movieName" align="center" label="影片名称"></el-table-column>
      <el-table-column prop="brandName" align="center" label="品牌名称"></el-table-column>
      <el-table-column prop="siteName" align="center" label="影院名称"></el-table-column>
      <el-table-column prop="playId" align="center" label="观看场次"></el-table-column>
      <el-table-column prop="ticketAmount" align="center" label="购票数量"></el-table-column>
      <el-table-column prop="actualIncome" align="center" label="实付金额"></el-table-column>
    </el-table>
    <el-pagination
      ref="pagination"
      class="mt-20"
      background
      :page-size.sync="pageOption.pageSize"
      :total="pageOption.total"
      @size-change="onSizeChange"
      @current-change="onPageChange"
      layout="slot,->,prev,pager,next,sizes,jumper"
    >
      <span class="pagination-title">
        共 {{ pageOption.total }} 条记录 第 {{ pageOption.page }} /
        {{ pageOption.pageTotal }} 页
      </span>
    </el-pagination>
  </div>
</template>

<script>
import { movieViewDetail } from "@/api/viewing";

export default {
  data() {
    return {
      movieId: '',
      searchData: {
        memberId: "",
        orderNum: ""
      },
      tableData: [],
      pageOption: {
        page: 1,
        pageSize: 20,
        total: 0,
        pageTotal: 1
      }
    };
  },
  methods: {
    onSearch() {
      this.pageOption.page = 1;
      this.requestData();
    },
    onReset() {
      this.pageOption.page = 1;
      this.searchData.memberId = "";
      this.searchData.orderNum = "";
      this.requestData();
    },
    async requestData() {
      const { page, pageSize: size } = this.pageOption,
        { memberId, orderNum } = this.searchData,
        params = { page: page - 1, size };
      if (memberId) {
        params.memberId = memberId;
      }

      if (orderNum) {
        params.orderNum = orderNum;
      }

      const { data, total } = await movieViewDetail(this.movieId, params);
      this.tableData = data || [];
      this.pageOption.total = total;
      this.pageOption.pageTotal = total ? Math.ceil(total / size) : 1;

      if (this.$refs.pagination) {
        let childrenRefs = this.$refs.pagination.$children;
        this.$nextTick(() => {
          childrenRefs.forEach(child => child.$forceUpdate());
        });
      }
    },
    onSizeChange(size) {
      this.pageOption.pageSize = size;
      this.requestData();
    },
    onPageChange(page) {
      this.pageOption.page = page;
      this.requestData();
    },
    cancel() {
      this.$router.go(-1);
    }
  },
  created() {
    let { movieId } = this.$route.params;
    if (movieId) {
      this.movieId = movieId;
      this.requestData();
    } else {
      this.cancel();
    }
  }
};
</script>

<style lang="scss">
</style>
